<template>
  <view class="body">
    <view class="address" @tap="getAddress">
      <view class="update_address" v-if="address.userName">
        <text class="address_name">
          {{ addressName }}
        </text>
        <view class="bottom">
          <text class="user_name"> {{ address.userName }} </text>
          <text class="phone_number"> {{ address.telNumber }} </text>
        </view>
      </view>
      <view class="add_address" v-else> 选择地址 </view>
    </view>
    <view class="goods">
      <view class="title">已选商品</view>
      <view class="goods_list">
        <GoodsListItem
          :goods="goods"
          v-for="goods in shoppingCarList"
          :key="goods.goods_id"
        >
          <template slot="right" class="count">
            x{{ goods.goods_count }}
          </template>
        </GoodsListItem>
      </view>
    </view>
    <view class="acount">
      <text class="total_text">合计:</text>
      <text class="total price">{{ totalMoney }}</text>
      <view class="to_buy" @tap="toPay">
        <view class="to_buy_btn">支付({{ totalAmount }})</view>
      </view>
    </view>
  </view>
</template>

<script>
import GoodsListItem from "@/components/GoodsListItem";
import { checkOrder, createOrder, getPayParams } from "@/api/pay";
export default {
  components: {
    GoodsListItem,
  },
  data() {
    return {
      shoppingCarList: [],
      address: {},
    };
  },
  onLoad() {
    this.shoppingCarList = uni.getStorageSync("shoppingCarList").filter(item=>item.goods_selected);
    this.address = uni.getStorageSync("address") || {};
  },
  computed: {
    addressName() {
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    totalMoney() {
      let total = 0;
      this.shoppingCarList.forEach((item) => {
        if (item.goods_selected) {
          total += item.goods_count * item.goods_price;
        }
      });
      return total;
    },
    totalAmount() {
      let total = 0;
      this.shoppingCarList.forEach((item) => {
        if (item.goods_selected) {
          total += item.goods_count;
        }
      });
      if (total === 0) {
        return false;
      } else {
        return total;
      }
    },
  },
  methods: {
    getAddress() {
      uni.chooseAddress({
        success: (res) => {
          this.address = res;
          uni.setStorageSync("address", res);
        },
      });
    },
    async toPay() {
      try {
        const order_price = this.totalMoney;
        const consignee_addr = this.addressName;
        const goods = this.shoppingCarList.map((item) => ({
          goods_id: item.goods_id,
          goods_number: item.goods_count,
          goods_price: item.goods_price,
        }));
        if (!consignee_addr) {
          uni.showToast({
            title: "请选择地址",
            icon: "none",
          });
          return;
        }
        const { order_number } = (
          await createOrder({ order_price, consignee_addr, goods })
        ).data.message;
        const pay = (await getPayParams({ order_number })).data.message.pay;
        await wx.requestPayment(pay);
        await checkOrder({ order_number });
        uni.showToast({
          title: "支付成功",
          icon: "none",
        });
        const shoppingCarList = uni.getStorageSync("shoppingCarList").filter(item=>!item.goods_selected)
        uni.setStorageSync('shoppingCarList', shoppingCarList)
        uni.redirectTo({
           url: '/pages-two/order/main'
        });
      } catch (error) {
        if (error.errMsg === "requestPayment:fail cancel") {
          uni.showToast({
            title: "取消支付",
            icon: "none",
          });
        } else {
          uni.showToast({
            title: "支付失败",
            icon: "none",
          });
        }
      }
    },
  },
};
</script>

<style lang="less">
.body {
  width: 100vw;
  min-height: 100vh;
  background-color: #f8f8f8;
  .address {
    margin: 10rpx 20rpx;
    height: 188rpx;
    border-radius: 10rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .add_address {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 300rpx;
      height: 90rpx;
      border-radius: 45rpx;
      border: 2rpx solid var(--main_color);
      color: var(--main_color);
      font-size: 30rpx;
    }
    .update_address {
      width: 666rpx;
      .address_name {
        width: 100%;
        color: #434343;
        font-size: 30rpx;
        height: 84rpx;
      }

      .bottom {
        margin-top: 20rpx;
        .user_name {
          color: #434343;
          font-size: 26rpx;
        }

        .phone_number {
          color: #434343;
          font-size: 26rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
  .goods {
    background-color: #fff;
    margin: 10rpx 20rpx;
    border-radius: 20rpx;
    overflow: hidden;
    .title {
      color: #434343;
      font-size: 26rpx;
      margin: 40rpx;
    }
    .count {
      color: #434343;
    }
  }
  .acount {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 20rpx;
    height: 83rpx;
    background-color: #fdfdfd;
    display: flex;
    align-items: center;
    .radio_text {
      padding: 0 10rpx;
      font-size: 21rpx;
      color: #8a8a8a;
    }
    .total_text {
      padding: 0 10rpx;
      font-size: 26rpx;
      color: #292929;
    }
    .price {
      font-size: 28rpx;
    }
    .to_buy {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      .to_buy_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 52rpx;
        border-radius: 26rpx;
        font-size: 21rpx;
        color: #eee;
        padding: 0 26rpx;
        background-color: var(--main_color);
      }
    }
  }
}
</style>